<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="content" v-if="isLoaded">
			<view class="headimg">
				<text class="headimg-text">头像</text>
				<view class="headimg-img">
					<robby-image-upload :src="userInfo.headimg" :width="width" :height="height" :lineheight="lineheight"
						:borderRadius="borderRadius"></robby-image-upload>
				</view>
			</view>
			<view class="realname" @tap="goname">
				<view class="realname-text">
					<text class="realname-text-title">姓名</text>
					<text class="realname-text-name" v-if="userInfo.realname">{{userInfo.realname}}</text>
					<text class="realname-text-name" v-else>佚名</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>

			<view class="realname" @tap="choseSex">
				<view class="realname-text">
					<text class="realname-text-title">性别</text>
					<text class="realname-text-name" v-if="userInfo.sex">{{userInfo.sex}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
			</view>
			<view class="realname">
				<view class="realname-text">
					<text class="realname-text-title">出生日期</text>
					<text class="realname-text-name" v-if="userInfo.borth">{{userInfo.borth}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<view>
					<view class="select-date">
						<button type="primary" @click="DatePicker('date')"
							style="font-size: 30upx;background-color: #F3431A;">选择日期</button>
					</view>
					<!-- <view class="date"> -->
					<MxDatePicker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'"
						:end-text="'离店'" :show-seconds="true" @confirm="ed" @cancel="ed"
						style="background-color: rgba(0,0,0,.4);" />
					<!-- </view> -->
				</view>
			</view>
			<view class="realname" @tap="gowork">
				<view class="realname-text">
					<text class="realname-text-title">工作经验</text>
					<text class="realname-text-name" v-if="userInfo.experience">{{userInfo.experience}}年</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>
			<view class="realname" @tap="gomobile">
				<view class="realname-text">
					<text class="realname-text-title">联系电话</text>
					<text class="realname-text-name" v-if="userInfo.mobile">{{userInfo.mobile}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>
			<view class="realname" @tap="gointroduce">
				<view class="realname-text">
					<text class="realname-text-title" style="height:auto">个人介绍</text>
					<text class="realname-text-name" v-if="userInfo.introduce">{{userInfo.introduce}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>

			<view class="realname" @tap="goAlipayAccount">
				<view class="realname-text">
					<text class="realname-text-title">支付宝账号</text>
					<text class="realname-text-name" v-if="userInfo.alipay_account">{{userInfo.alipay_account}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>

			<view class="realname" @tap="goAlipayName">
				<view class="realname-text">
					<text class="realname-text-title">支付宝姓名</text>
					<text class="realname-text-name" v-if="userInfo.alipay_name">{{userInfo.alipay_name}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>
			
			<view class="realname" @tap="goEmployer">
				<view class="realname-text">
					<text class="realname-text-title">所属公司</text>
					<text class="realname-text-name" v-if="userInfo.company_name">{{userInfo.company_name}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>

			<view class="buttons">
				<view class="btn1" @tap="goIndex">
					返回主页
				</view>
				<view class="btn2" @tap="goMsg">
					完善/修改工作信息
				</view>
			</view>
		</view>

		<!-- 底部菜单 -->
		<BottomTabbar :selected="3"></BottomTabbar>
	</view>

</template>

<script>
	import BottomTabbar from '@/components/bottom-tabbar/bottom-tabbar.vue';
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		data() {
			return {
				title: '个人信息',
				isLoaded: false,
				right: '/static/images/right.png',

				userInfo: {
					headimg: '/static/images/touxiang.png',
					realname: '',
					sex: '',
					borth: '',
					experience: '',
					mobile: '',
					introduce: '',
					alipay_account: '',
					alipay_name: ''
				},
				date: '2005/01/01',
				showPicker: false,
				type: 'rangetime',
				value: '',

				height: '170rpx',
				lineheight: '170rpx',
				width: '170rpx',
				borderRadius: "50%",
			}
		},
		components: {
			BottomTabbar,
			robbyImageUpload,
			MxDatePicker
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			this.loadData();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 600)
		},

		computed: {

		},

		onLoad: function() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			uni.showLoading({
				title: '加载中...'
			});
			this.loadData();
			setTimeout(() => {
				this.isLoaded = true;
				uni.hideLoading();
			}, 600)

			uni.$on('changeHeadimg', (option) => {
				let data = JSON.parse(option)
				this.userInfo.headimg = data.data;
				this.headimg(data.data)
			})

			uni.$on('changeRealname', (option) => {
				this.userInfo.realname = option.realname;
			})

			uni.$on('changeExperience', (option) => {
				this.userInfo.experience = option.experience;
			})

			uni.$on('changeMobile', (option) => {
				this.userInfo.mobile = option.mobile;
			})

			uni.$on('changeIntroduce', (option) => {
				this.userInfo.introduce = option.introduce;
			})

			uni.$on('changeAlipayAccount', (option) => {
				this.userInfo.alipay_account = option.account;
			})

			uni.$on('changeAlipayName', (option) => {
				this.userInfo.alipay_name = option.name;
			})
		},
		methods: {
			async loadData() {
				let token = uni.getStorageSync('token');
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: 1,
						token: token
					},
					methods: 'post'
				})

				let info = res.data.data;
				if (info.realname) {
					this.userInfo.realname = info.realname;
				}
				if (info.avatar) {
					this.userInfo.headimg = info.avatar;
				}

				switch (info.sex) {
					case 1:
						this.userInfo.sex = '男';
						break;
					case 2:
						this.userInfo.sex = '女';
						break;
				}

				if (info.birthday) {
					this.userInfo.borth = info.birthday;
					this.date = info.birthday;
				}

				if (info.work_year) {
					this.userInfo.experience = info.work_year;
				}

				if (info.mobile) {
					this.userInfo.mobile = info.mobile;
				}

				if (info.introduction) {
					this.userInfo.introduce = info.introduction;
				}

				if (info.alipay_account) {
					this.userInfo.alipay_account = info.alipay_account;
				}

				if (info.alipay_name) {
					this.userInfo.alipay_name = info.alipay_name;
				}

				uni.setStorageSync('uploadType', 'headimg')

			},

			async goname() {
				uni.navigateTo({
					url: '/pages2/pages/realname/realname?realname=' + this.userInfo.realname
				})
			},

			async gowork() {
				uni.navigateTo({
					url: '/pages2/pages/experience/experience?experience=' + this.userInfo.experience
				})
			},

			async gomobile() {
				uni.navigateTo({
					url: '/pages2/pages/mobile/mobile?mobile=' + this.userInfo.mobile
				})
			},

			async gointroduce() {
				uni.navigateTo({
					url: '/pages2/pages/introduce/introduce?introduce=' + this.userInfo.introduce
				})
			},

			async goAlipayAccount() {
				uni.navigateTo({
					url: '/pages2/pages/alipay/account?account=' + this.userInfo.alipay_account
				})
			},

			async goAlipayName() {
				uni.navigateTo({
					url: '/pages2/pages/alipay/name?name=' + this.userInfo.alipay_name
				})
			},

			async talk() {
				// console.log(this.hasLogin)
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},

			async choseSex() {
				uni.showActionSheet({
					itemList: ['男', '女'],
					success: (res) => {
						let sex = res.tapIndex + 1;
						let token = uni.getStorageSync('token');
						let dataObj = {
							token: token,
							sex: sex
						};

						this.sex(dataObj);
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},

			async sex(dataObj) {
				let res = await this.$myRequest({
					url: '/sex',
					data: dataObj,
					methods: 'post'
				})
				this.$api.msg(res.data.msg, 1000);
				switch (dataObj.sex) {
					case 1:
						this.userInfo.sex = '男';
						break;
					case 2:
						this.userInfo.sex = '女';
						break;
				}

				uni.$emit('changeStatus');
			},

			async headimg(headimg) {
				// console.log(headimg)
				let token = uni.getStorageSync('token');
				let res = await this.$myRequest({
					url: '/headimg',
					data: {
						cate: 1,
						token: token,
						headimg: headimg
					},
					methods: 'post'
				})

				uni.$emit('changeStatus');
			},

			DatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					// console.log('value => ' + e.value);
					this.userInfo.borth = e.value;
					//原始的Date对象
					// console.log('date => ' + e.date);

					let token = uni.getStorageSync('token');
					let dataObj = {
						token: token,
						borth: e.value
					};

					this.ndate(dataObj);
				}
			},
			async ndate(dataObj) {
				let res = await this.$myRequest({
					url: '/borth',
					data: dataObj,
					methods: 'post'
				})
				this.$api.msg(res.data.msg, 1000);
				uni.$emit('changeStatus');
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages2/pages/personal/personal'
					})
				}, 1000)
			},

			async goIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},

			async goMsg() {
				uni.navigateTo({
					url: '/pages2/pages/work/work'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
		min-height: 1620upx;
	}
</style>
<style lang='scss' scoped>
	.content {
		font-size: $font-base;
		background-color: #fff;
		// #ifdef APP-PLUS
		padding: 168rpx 48rpx 0rpx;
		// #endif

		// #ifdef H5
		padding: 108rpx 48rpx 0rpx;
		// #endif

		// #ifdef MP-WEIXIN
		padding: 168rpx 48rpx 0rpx;
		// #endif

		.headimg {
			width: 100%;
			height: 170rpx;
			line-height: 170rpx;
			position: relative;
			border-bottom: 1px solid #f3f3f6;
			display: flex;
			justify-content: space-between;

			.headimg-img {
				height: 170rpx;
				width: 170rpx;
				line-height: 170rpx;
				vertical-align: center;
			}
		}

		.realname {
			width: 100%;
			min-height: 170rpx;
			line-height: 170rpx;
			position: relative;
			border-bottom: 1px solid #f3f3f6;

			.realname-text {
				position: absolute;
				top: 29rpx;
				display: inline-flex;
				flex-direction: column;
				align-items: left;
				max-width: 88%;

				.realname-text-title,
				.realname-text-name {
					/* height: 56rpx; */
					line-height: 56rpx;
					white-space: nowrap;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.realname-text-title {
					color: #808080
				}
			}

			.realname-img {
				height: 170rpx;
				width: 50rpx;
				display: inline-block;
				padding: 75rpx 19rpx;
				float: right;
			}
		}

		.select-date {
			text-align: center;
			padding: 10px 0;
			width: 180rpx;
			height: 170rpx;
			float: right;
			display: flex;
			align-items: center;
		}

		uni-button[type=primary] {
			background-color: #f3431a;
			font-size: $font-base;
		}

		.buttons {
			display: flex;
			justify-content: space-between;
			font-size: $font-base;
			padding: 30upx 0;
		}

		.btn1,
		.btn2 {
			background-color: $base-color;
			color: #fff;
			padding: 15upx 20upx;
			border-radius: 10upx;
		}
	}
</style>
